<template>
  <div class="calendar_bill">
    <div class="weekday_header">
      <div v-for="(item, index) in weekData" :key="'week' + index" class="weekday_header_item">{{ item }}</div>
    </div>
    <div class="calendar_content">
      <div class="grid_item white_block" v-for="(item, index) in whiteBlock" :key="index"></div>
      <div 
        :class="['grid_item', selectBlockIndex === index ? 'select_date_block' : '' ]" 
        v-for="(item, index) in dayMoneyList" 
        :key="'date' + index" 
        @click="handleSelectDate(item.index)"
      >
        <div class="date">{{ item.index }}</div>
        <div class="income" v-if="item.income + item.pay !== 0">+{{ item.income }}</div>
        <div class="pay" v-if="item.income + item.pay !== 0">-{{ item.pay }}</div>
        <div v-if="item.income+item.pay === 0">空</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { getBillListForRange } from '@/api/bill'
import { getMonthCount } from '@/utils/helper'
import dayjs from 'dayjs'
import { defineComponent, onMounted, ref, watch } from 'vue'
export default defineComponent({
  props: {
    currentDate: {
      type: Date,
      required: true
    }
  },
  setup(props, context) {
    watch(() => props.currentDate, (value, oldValue) => {
      const a = JSON.stringify(value)
      const b = JSON.stringify(oldValue)
      if(a !== b) {
        getShowDate(),
        getBillList()
      }
    })
    const weekData = ['日', '一', '二', '三', '四', '五', '六']
    const calendarBlock = ref(0)
    const whiteBlock = ref(0)
    const selectBlockIndex = ref(0)
    const billList = ref([{
      date: '',
      income: 0,
      pay: 0
    }])
    const dayMoneyList = ref([{
      index: -1,
      income: 0,
      pay: 0
    }])
    // 点击日历中的单个日期
    const handleSelectDate = (day: number) => {
      selectBlockIndex.value = day - 1
      const date = new Date(props.currentDate.getFullYear(), props.currentDate.getMonth(), day )
      context.emit('select', date)
    }
    // 获取日历展示的月份的空白格和天数格
    const getShowDate = () => {
      const date = props.currentDate
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      calendarBlock.value = getMonthCount(month, year)
      whiteBlock.value = new Date(year, month-1, 1).getDay() - 1
    }
    // 请求整个月的账单数据
    const getBillList = ()  => {
      dayMoneyList.value = []
      const end = dayjs(props.currentDate).format('YYYY-M-')+calendarBlock.value
      const start = dayjs(props.currentDate).format('YYYY-M-')+'1'
      getBillListForRange({
        end,
        start,
        type: 'day'
      }).then((res) => {
        if(typeof res.code === 'number' && res.code === 100) {
          billList.value = res.data
          handleGetDayMoneyList()
        }
      })
    }
    // 处理展示的支出和收入的数据
    const handleGetDayMoneyList = () => {
      const year = props.currentDate.getFullYear()
      const month = props.currentDate.getMonth()+1
      for (let i = 1; i <= calendarBlock.value; i++) {
        const data = {
          index: i,
          income: 0,
          pay: 0
        }
        dayMoneyList.value.push(data)
      }
      for (let i = 1; i <= calendarBlock.value; i++) {
        const date = dayjs(new Date(year, month-1, i)).format('YYYY-MM-DD')
        if(billList.value) {
          billList.value.forEach(item => {
            if(item.date === date) {
              const { income, pay } = item
              dayMoneyList.value[i - 1].income = income
              dayMoneyList.value[i - 1].pay = pay
            }
          });
        }
      }
    }
    onMounted(() => {
      getShowDate(),
      getBillList(),
      handleSelectDate(new Date().getDate())
    })
    return {
      weekData,
      calendarBlock,
      whiteBlock,
      dayMoneyList,
      selectBlockIndex,
      handleSelectDate,
      getShowDate
    }
  }
})
</script>

<style scoped>
  .weekday_header {
    display: flex;
    margin-bottom: 10px;
  }
  .weekday_header_item {
    width: 14%;
  }
  .calendar_content {
    display: grid;
    grid-template-columns: repeat(auto-fill, 14%);
    align-items: center;
  }
  .grid_item {
    padding: 4px 0;
    height: 54px;
  }
  .select_date_block {
    background-color: #F9C3C2;
    border-radius: 8px;
    color: #fff;
  }
  .date {
    font-weight: 600;
    font-size: 18px;
  }
  .income {
    color: #eb7775;
    font-weight: 600;
    font-size: 12px;
  }
  .select_date_block .income {
    color: #fff;
  }
  .pay {
    color: #5dbb41;
    font-weight: 600;
    font-size: 12px;
  }
  .select_date_block .pay {
    color: #fff;
  }
  .weekend_date {
    color: #5dbb41;
  }
</style>